<template>
    <div class="login">
        <div class="bg_ball1"><img src="./img/ball1.png"></div>
        <div class="bg_ball2"><img src="./img/ball2.png"></div>
        <div class="form_area">
            <div class="title">后台登录</div>
            <div class="login_form">
                <div class="login_form_item">
                    <div class="item_input">
                        <input type="text"
                               v-model.trim="form.username"
                               v-on:keyup.enter="submitForm()"
                               placeholder="账号"
                               class="input">
                    </div>
                </div>
                <div class="login_form_item flex jb ac">
                    <div class="item_input">
                        <input type="password"
                               v-model.trim="form.password"
                               v-on:keyup.enter="submitForm()"
                               placeholder="密码"
                               class="input">
                    </div>
                </div>
            </div>
            <div class="submit"
                 @click="submitForm">立即登录</div>
            <div class="info">
                <div class="info_title flex jb ac"><span>技术支持</span></div>
                <div class="info_desc">
                    <p>© {{new Date().getFullYear()}} 图小二 版权所有　仅供个人使用不可传播</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessage, ElNotification, ElLoading } from 'element-plus'
import { ref, reactive, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router';
const route = useRoute(), router = useRouter()
const http = inject('http')
const form = reactive({
    username: '',
    password: '',
})
function submitForm () {
    if (!form.username.length) {
        ElMessage({
            message: '账号不能为空',
            type: 'error',
        })
        return
    }
    if (!form.password.length) {
        ElMessage({
            message: '密码不能为空',
            type: 'error',
        })
        return
    }
    if (form.password.length < 6) {
        ElMessage({
            message: '密码不能小于6位',
            type: 'error',
        })
        return
    }
    if (form.password.length > 20) {
        ElMessage({
            message: '密码不能超过20位',
            type: 'error',
        })
        return
    }
    const loading = ElLoading.service({
        lock: true,
        text: '登录中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    http.post(BASE_URL + '/admin/pub/login', form).then(res => {
        if (res.code == 200) {
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('username', res.data.username)
            localStorage.setItem('user_url', res.data.user_url)
            ElNotification({
                title: '登陆成功',
                message: '登陆成功，正在跳转',
                type: 'success',
            })
            setTimeout(() => {
                router.push('/')
            }, 500);
        }
    }).finally(() => {
        loading.close()
    })
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url("./img/bg.png") no-repeat center;
    background-size: cover;
    position: relative;
    .bg_ball1 {
        opacity: 0.4;
        position: absolute;
        max-width: 568px;
        left: 400px;
        top: 200px;
        animation: floatAndRotate 10s infinite ease-in-out;
    }
    .bg_ball2 {
        opacity: 0.4;
        position: absolute;
        max-width: 320px;
        right: 500px;
        top: 200px;
        animation: floatAndRotateReverse 10s infinite ease-in-out;
    }
    .bg_ball1,
    .bg_ball2 {
        img {
            width: 100%;
            height: 100%;
        }
    }
}

// 球体1的动画：旋转、浮动、缩放
@keyframes floatAndRotate {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(-20px, -30px) rotate(90deg) scale(1.2);
    }
    50% {
        transform: translate(0, -50px) rotate(180deg) scale(0.9);
    }
    75% {
        transform: translate(20px, -20px) rotate(270deg) scale(1.1);
    }
    100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
    }
}

// 球体2的动画：反向旋转、浮动、缩放
@keyframes floatAndRotateReverse {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(30px, -20px) rotate(-90deg) scale(0.8);
    }
    50% {
        transform: translate(0, -40px) rotate(-180deg) scale(1.5);
    }
    75% {
        transform: translate(-30px, -10px) rotate(-270deg) scale(0.9);
    }
    100% {
        transform: translate(0, 0) rotate(-360deg) scale(1);
    }
}
.form_area {
    width: 400px;
    margin: 0 auto;
    padding: 30px;
    position: relative;
    overflow: hidden;
    border: 1.5px solid #fff;
    border-radius: 8px;
    background: hsla(0, 0%, 100%, 0.5);
    top: 20vh;
    .title {
        font-size: 20px;
        text-align: center;
        letter-spacing: 6;
        margin-bottom: 20px;
    }
    .login_form {
        padding: 15px 0;
        .login_form_item {
            height: 38px;
            line-height: 38px;
            margin-bottom: 20px;
            .item_title {
                font-size: 14px;
                color: #999;
            }
            .item_input {
                flex: 1;
                .input {
                    width: 100%;
                    height: 38px;
                    line-height: 38px;
                    border: 1px solid #eeeeee;
                    border-radius: 2px;
                    background-color: transparent;
                    color: #000000d9;
                    padding-left: 10px;
                    transition: all 0.3s linear;
                    &:hover {
                        border: 1px solid #cccccc;
                    }
                }
            }
        }
    }
    .submit {
        height: 40px;
        line-height: 40px;
        background: #009688;
        text-align: center;
        color: #fff;
        font-size: 14px;
        border-radius: 2px;
        cursor: pointer;
        transition: all 0.3s linear;
        &:hover {
            opacity: 0.8;
        }
    }
    .info {
        margin-top: 50px;
        .info_title {
            margin-bottom: 10px;
            text-align: center;
            &:before,
            &:after {
                content: "";
                flex: 1;
                height: 1px;
                background: #eee;
            }
            span {
                font-size: 16px;
                color: #999;
                margin: 0 10px;
            }
        }
        .info_desc {
            font-size: 12px;
            color: #999;
            text-align: center;
        }
    }
}
</style>